<template>
    <div>
        <div style="padding: 10px;background-image: linear-gradient(to bottom,#2894ff ,#e8f3f5);">
            <div style="background-color: #fdfffe;padding: 18px 10px;border-radius: 5px;">
                <div style="background-color: #fdfffe;">
                    <p style="font-weight: bold; font-size:22px;line-height: 36px;">快速问医生</p>
                    <p font-size="12px">3分钟接诊 · 3小时沟通</p>
                </div>
                <div style="font-size: 13px;margin-top: 20px;padding: 8px;border: 1px solid orange;border-radius: 6px;background-color: #fcf2e6">
                    <div style="display: flex;justify-content: space-between;">
                        <span style="font-size:18px;color: #b6803f;">医生快速咨询<span 
                            style="margin-left: 8px;
                            margin-top: 10px;
                            background-color: #ca771a;
                            font-size: 13px;
                            padding: 2px 5px;
                            font-weight: bolder;
                            color: aliceblue;
                            display: inline-block;
                            border-radius: 8px 3px;
                            ">优选</span></span>
                        <span style="font-size: 22px;color: #fb4115;font-weight: bolder;">￥9.00</span>
                    </div>
                    <div style="display: flex;justify-content: space-between;">
                        <span style="margin-top: 5px;color: #504e4f;">优选公立医院医生,专业可靠</span>
                        <button style="background-color: #fc9724; color: white; border-radius: 5px;padding: 5px 10px;font-weight: bolder;border: 0px;">立即问</button>
                    </div>
                </div>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                    ·正在接诊的医生
                </van-divider>
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <van-swipe vertical loop :show-indicators="false" style="height: 20px;width: 100%;" autoplay="3000" duration="2000">
                        <van-swipe-item v-for="item in Doctors" :key="item.doctor_id">
                            <div style="display: flex;justify-content: center;width: 100%;flex-direction: row;">
                                <div>
                                    <div>
                                        <img :src="item.doctor_avatar"
                                            style="vertical-align: middle;width: 20px;border-radius: 50%;">
                                        <span style="margin:0 5px;font-size: 14px;">{{ item.doctor_name }}</span>
                                        <span
                                            style="display:inline-block;font-size: 12px;background-color: #ececf2;color: #8e919a;">三甲</span>
                                            <span style="font-size: 14px;transform: scale(0.8);margin-left: 8px;color: #7a7e82;">{{ item.hospital_name }}</span>
                                    </div>
                                </div>
                            </div>
                        </van-swipe-item>
                    </van-swipe>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted,reactive } from 'vue';
import httpApi from '@/http';
import Doctor from '@/type/Doctor';
import { useRoute } from 'vue-router';
const route = useRoute()
const Doctors = reactive<Doctor[]>([])
const d_id = route.params.d_id
onMounted(()=>{
    let params = { department_id:d_id }
    httpApi.DoctorApi.selectDoctorByType(params).then(res=>{
        console.log('11加载的内容',res);
        Doctors.splice(0,Doctors.length,...res.data.data)
        console.log('11最后的结果', Doctors);
    })
    document.documentElement.scrollTop=0
})
</script>

<style scoped>
p{
    margin: 0px;
}
</style>